<template>
  <div class="recommend">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.encodeId">
        <img :src="item.imageUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-pull-refresh v-model="loading" @refresh="refresh">
      <h4>推荐歌单</h4>
      <ul class="list">
        <li class="item" v-for="item in data" :key="item.id" @click="itemClick(item.id)">
          <img v-lazy="item.picUrl" :src="item.picUrl" alt="" />
          <p class="cover"></p>
          <div class="playTotal">
            <span class="iconfont icon-headset"></span>
            <span>{{ filterNum(item.playCount) }}</span>
          </div>
          <div class="info">{{ item.name }}</div>
        </li>
      </ul>
    </van-pull-refresh>
    <transition enter-active-class="fly-in" leave-active-class="fly-out">
      <router-view />
    </transition>
  </div>
</template>

<script>
import { getCurrentInstance, ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
  setup() {
    let { proxy } = getCurrentInstance()
    let data = ref([])
    let loading = ref(false)
    let bannerList = ref([])
    let router = useRouter()
    function getList() {
      proxy.$showLoading()
      proxy.$api.home.getRecommendList().then((res) => {
        data.value = res.result
        loading.value = false
        proxy.$hideLoading()
      })
    }

    getList()
    // 获取bannner
    proxy.$api.home.getBanner().then((res) => {
      bannerList.value = res.banners
    })
    // 下拉刷新
    function refresh() {
      loading.value = true
      getList()
    }
    // 点击推荐歌单
    function itemClick(id) {
      router.push('/recommend/' + id)
    }
    return { data, loading, bannerList, refresh, itemClick }
  }
}
</script>

<style lang="less" scoped>
.recommend {
  width: 100%;
  .my-swipe .van-swipe-item {
    height: 150px;
    img {
      height: 100%;
    }
  }
  h4 {
    font-size: @font-size-l;
    font-weight: 700;
    margin: 10px 0 20px 10px;
  }
  .list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 32%;
      img {
        width: 100%;
        border-radius: 7px;
      }
      .cover {
        width: 100%;
        height: 20%;
        position: absolute;
        border-radius: 7px;
        top: 0;
        left: 0;
        background: linear-gradient(rgba(110, 110, 110, 0.4), rgba(255, 255, 255, 0));
      }
      .playTotal {
        position: absolute;
        top: 2px;
        right: 2px;
        font-size: @font-size-s;
        color: @font-color-light;
        display: flex;
        align-items: center;
        .iconfont {
          font-size: @font-size-m;
        }
      }
      .info {
        color: @font-color-desc;
        height: 44px;
        margin: 2px 0 8px 2px;
        .ellipsis2;
      }
    }
  }
}
</style>
